<template>
    <div class="login">
        <h1>登录</h1>
        <div class="login-wrapper">
            <div class="avater">
                <img alt=""
                     src="https://img0.baidu.com/it/u=671112370,873229032&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1720630800&t=1bdd5887bded9e75b8be9722a9994db3">
            </div>
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field v-model="username" :rules="[{ required: true, message: '请填写用户名' }]" label="用户名"
                               name="username"
                               placeholder="用户名">
                        <template #left-icon>
                            <van-icon name="https://fastly.jsdelivr.net/npm/@vant/assets/icon-demo.png"/>
                        </template>
                    </van-field>
                    <van-field v-model="password" :rules="[{ required: true, message: '请填写密码' }]" label="密码"
                               name="password" placeholder="密码"
                               type="password">
                        <template #left-icon>
                            <van-icon name="records-o"/>
                        </template>
                    </van-field>
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button block native-type="submit" round type="primary">
                        登入
                    </van-button>
                </div>
            </van-form>
            <van-field name="checkbox">
                <template #input>
                    <div class="container">
                        <span class="text-ms ml-4 text-[#e6723c]">如欲继续操作，请先同意必选条款</span>
                        <div style="display: flex;justify-content: space-around;width: 280px">
                            <van-checkbox v-model="checked" shape="square"/>
                            <span class="text-xs ml-2">(必选)我同意<a href="#">《用户协议》</a>和<a
                                    href="#">《使用条款》</a></span>
                        </div>
                    </div>
                </template>
            </van-field>
        </div>
        <p class="register" @click="() => router.push('/register')">新用户？点击这里注册</p>
    </div>
</template>

<script setup>
import {ref} from 'vue'
import axios from '@/api/index.js'
// import router from '@/router/index.ts';
import {useStorage} from "@/hooks/useStorage.ts";
import {useRouter} from "vue-router";
import {usePermissStore} from "@/stores/permiss.ts";

const router = useRouter()
const username = ref('')
const password = ref('')
const checked = ref(false)
const permissStore = usePermissStore()

//登录
const onSubmit = async (values) => {
    const res = await axios.post('/user/login', {
        username: values.username,
        password: values.password
    })
    const keys=permissStore.defaultList[
        values.username==='admin'?'admin':'user'
        ]
    permissStore.handleSet(keys)
    let userinfo = useStorage('userInfo', {})
    userinfo.value = res.data
    // localStorage.setItem('username', JSON.stringify(res.data))
    localStorage.setItem('token', res.token)
    if (checked.value === true) {
        await router.push('/find')
    }

}
</script>
<style lang="less" scoped>
.login {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  padding: 0 0.3rem;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;

  h1 {
    height: 0.6933rem;
    text-align: center;
    font-size: 0.48rem;
    margin-top: 1.12rem;
  }

  .login-wrapper {
    width: 7.44rem;
    height: 10.77rem;
    border: 1px solid rgba(187, 187, 187, 1);
    margin: 0 auto; // 块级元素水平居中
    margin-top: 1.7rem;
    border-radius: 0.3rem;
    box-shadow: 0 0 0.533rem rgba(170, 170, 170, 1); // 第三个参数阴影的扩散范围，（第四个参数是阴影宽度）第四个参数阴影的颜色，

    .avater {
      width: 2.4rem;
      height: 2.4rem;
      margin: 1rem auto 0.77rem;
      border-radius: 50%;
      overflow: hidden;

      img {
        width: 100%;
      }
    }
  }

  .register {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translate(-50%);
    font-size: 0.374rem;
    color: rgba(16, 16, 16, 1);
  }
}

:deep(.van-cell__title.van-field__label) {
  width: 45px;
}

.container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
</style>